<template>
  <div class="home">
    <!-- 导航栏 -->
    <NavBar v-if="!flag" class="nav" title="拜访报告">
      <template #right>
        <Icon @click="add" name="plus" class="f5" color="#ee0a24"></Icon>
      </template>
      <template #left>
        <Button size="small" type="primary" @click="openExport">导出</Button>
      </template>
    </NavBar>

    <!-- 列表-->
    <List ref="ListRef" />
    <Button v-if="flag" type="primary" size="small" @click="add" style="position: fixed; top: 7%; right: 1%" round="">新增报告</Button>
    <Button v-if="flag" type="primary" size="small" @click="openExport" style="position: fixed; bottom: 2%; left: 1%" round="">导出</Button>
    <!-- 选择模板 -->
    <VanDialog title="请选择要导出时间段(我收到的)" :show-cancel-button="false" :show-confirm-button="false" v-model:show="showTime">
      <div style="margin: 10px">
        <CellGroup>
          <Field readonly clickable label="开始时间" v-model="startTime" placeholder="选择开始时间" @click="showStartPicker = true" />
          <Field readonly clickable label="结束时间" v-model="endTime" placeholder="选择结束时间" @click="showEndPicker = true" />
        </CellGroup>
        <div style="display: flex">
          <Button size="small" style="flex: 4; margin: 10px 20px" type="success" @click="closePicker">取消</Button>
          <Button size="small" style="flex: 4; margin: 10px 20px" type="danger" @click="exportList">导出</Button>
        </div>
      </div>
    </VanDialog>
    <Popup v-model:show="showStartPicker" position="bottom">
      <DatetimePicker @confirm="onStartConfirm" @cancel="showStartPicker = false" v-model="currentDate" type="date" title="选择开始日期"
    /></Popup>
    <Popup v-model:show="showEndPicker" position="bottom"> <DatetimePicker @confirm="onEndConfirm" @cancel="showEndPicker = false" v-model="currentDate" type="date" title="选择结束日期" /></Popup>
  </div>
</template>

<script setup name="home">
import { ref } from "vue";
import { NavBar, Icon, Dialog, Button, DatetimePicker, Field, CellGroup, Popup, Toast } from "vant";
import { setTime } from "@/utils/index";
import { Local } from "@/utils/storage";
import exportDataInExcel from "@/utils/exportToExcel.js";

import { getVisitList } from "@/api/index";
const showTime = ref(false);
const VanDialog = Dialog.Component;
import { useRouter } from "vue-router";
const router = useRouter();

import List from "../home/list.vue";

// 新增
const add = (num) => {
  router.push({
    path: "/addTroops",
    query: {
      type: 2,
    },
  });
};

// 打开导出选择

const startTime = ref("");
const endTime = ref("");
const showStartPicker = ref(false);
const showEndPicker = ref(false);
const currentDate = new Date();

const openExport = () => {
  showTime.value = true;
};

const onStartConfirm = (date) => {
  startTime.value = setTime(date);
  showStartPicker.value = false;
};

const onEndConfirm = (date) => {
  endTime.value = setTime(date);
  showEndPicker.value = false;
};

// 取消下载
const closePicker = () => {
  currentDate.value = new Date();
  startTime.value = "";
  endTime.value = "";
  showTime.value = false;
};

// 导出前置
const params = ref({ pageIndex: 1, pageSize: 999, type: 1, userid: Local.get("userId") });
const exportList = async () => {
  if (!startTime.value) return Toast("开始时间和结束时间不能为空");
  if (!endTime.value) return Toast("结束时间不能为空");
  let res = await getVisitList({ sTime: startTime.value, eTime: endTime.value, ...params.value });
  if (!res.data) {
    return Toast("该时间段未找到拜访记录");
  }
  await exportExcel(res.data.items);
};

//导出
const exportExcel = async (s) => {
  //需要导出字段的名字
  let arrName = ["名字", "创建时间", "拜访日期", "客户名称"];
  let list = [];
  //需要导出字段的名字表格的对应的列宽
  let columnWidth = [30, 30, 30, 50];
  //获取你需要导出的固定字段名字和值
  //找出对应需要的字段传到公共导出方法里面
  s.forEach((el) => {
    list.push({
      title: el.title.split("的")[0],
      time: el.time?.split(" ")[0],
      visitTime: el.visitTime,
      customerName: el.customerName,
    });
  });
  //导出传入公共方法
  exportDataInExcel(list, "拜访记录统计表", columnWidth, arrName);
};

// 判断是电脑还是手机
const flag = ref(null);
// 判断是否是手机端，如果是，返回true
const _isMobile = () => {
  flag.value = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
};
console.log("判断是否是手机端", flag.value);
_isMobile();
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
